/* hook组件 useEffect */
import React, {useEffect, useState} from 'react'
import {Button} from "antd";

// 模拟从服务器获取数据
const queryData = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve([10, 20, 30])
        }, 1000)
    })
}

/*
*  useEffect 如果设置返回值，则返回值必须是一个函数(代表组件销毁时触发)；
*  下面案例中，callback 经过 async 的修饰，默认返回的是 promise ，不符合要求！！！
* */

const Demo = function () {
    let [num, setNum] = useState(0)
    /* useEffect 必须在函数的最外层上下文中调用，不能把其嵌入到条件判断中，循环等操作语句中
    * if (num > 5) { // 报错
    *   useEffect(() => {}, [num])
    *   console.log('ok')
    * }
    *  */
    useEffect(() => {
        if (num > 5) {
            console.log('ok')
        }
        console.log(111)
    }, [num])

    // 第一次渲染完毕后，从服务器异步获取数据
    /*// useEffect 如果设置返回值，则返回值必须是一个函数(代表组件销毁时触发)；
    // 下面案例中，callback 经过 async 的修饰，默认返回的是 promise ，不符合要求！！！
    useEffect(async ()=>{
        let data = await queryData()
        console.log('成功', res)
    },[])   */

    useEffect(() => {
        queryData().then(res => {
            console.log('成功', res)
        })
    }, [])
    const handle = () => {
        setNum(num + 1)
    }
    return <div className="demo">
        <span className="num">num:{num}</span>
        <Button type="primary" size="small" onClick={handle}>新增</Button>
    </div>
}

export default Demo